@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}

/*4.20 评论列表
  name:      hui-comment
  sample:
    <ul class="hui-comment">
      <li class="hui-comment-item clearfix">
        <a href="#"><i class="hui-avatar size-L radius"><img alt="" src="static/h-ui/images/ucenter/avatar-default.jpg"></i></a>
        <div class="hui-comment-main">
          <header class="hui-comment-header">
            <div class="hui-comment-meta">
              <a class="hui-comment-author" href="#">辉哥</a> 评论于
              <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time>
            </div>
          </header>
          <div class="hui-comment-body">
            <p><a href="#">@某人</a> 你是猴子派来的救兵吗？</p>
          </div>
        </div>
      </li>
    </ul>
*/
.hui-comment {
  .hui-comment-item {
    list-style: none outside none;
    margin: 1.6rem 0 0;
    .hui-avatar {
      border: 1px solid transparent;
      float: left;
    }
    .hui-comment-main {
      position: relative;
      margin-left: 64px;
      border: 1px solid #dedede;
      @include borderRadius(2px);
      &:before,
      &:after {
        position: absolute;
        top: 11px;
        left: -16px;
        right: 100%;
        width: 0;
        height: 0;
        display: block;
        content: " ";
        border-color: transparent;
        border-style: solid solid outset;
        pointer-events: none;
      }
      &:before {
        border-right-color: #dedede;
        border-width: 8px;
      }
      &:after {
        border-width: 7px;
        border-right-color: #f8f8f8;
        margin-top: 1px;
        margin-left: 2px;
      }
      .hui-comment-header {
        padding: 10px 15px;
        background: #f8f8f8;
        border-bottom: 1px solid #eee;
        .hui-comment-title {
          margin: 0 0 8px 0;
          font-size: 1.6rem;
          line-height: 1.2;
        }

        .hui-comment-meta {
          font-size: 13px;
          color: #999;
          line-height: 1.2;
          a {
            color: #999;
          }
          .hui-comment-author {
            font-weight: 700;
            color: #999;
          }
        }
      }
      .hui-comment-body {
        padding: 15px;
        overflow: hidden;
        >:last-child {
          margin-bottom: 0;
        }
      }
    }
    &.hui-comment-flip {
      .hui-avatar {
        float: right;
      }
      .hui-comment-main {
        margin-left: 0;
        margin-right: 64px;
        &:before {
          border-left-color: #dedede;
          border-right-color: transparent;
        }
        &:before,
        &:after {
          left: 100%;
          position: absolute;
          right: -16px;
        }
        :after {
          border-left-color: #f8f8f8;
          border-right-color: transparent;
          margin-left: auto;
          margin-right: 2px;
        }
      }
    }
  }
}